<template>
    <div>
        <div class="infor">
            <!-- 头像信息 -->
            <div class="user">
                <!-- 头像 -->
                <div class="user-avatar">
                    <div>
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    </div>
                </div>
                <!-- 文本 -->
                <div class="text">文本内容，不知道写什么</div>
            </div>
            <!-- 更多 -->
            <div class="more">更多</div>
        </div>
        <div class="content">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <p>访问量</p>
                        <div class="flex">
                            <el-icon>
                                <Histogram />
                            </el-icon>
                            <span id="n">9840</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <p>成交额</p>
                        <div class="flex">
                            <el-icon>
                                <Money />
                            </el-icon>
                            <span>1942</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <p>下载量</p>
                        <div class="flex">
                            <el-icon>
                                <Download />
                            </el-icon>
                            <span>1234</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <p>成交量</p>
                        <div class="flex">
                            <el-icon>
                                <Coin />
                            </el-icon>
                            <span>5678</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="chart">
            <el-card style="margin-top: 10px;">
                <v-chart :option="barOption" style="height: 300px; width: 450px;" />
            </el-card>
            <el-card style="margin-top: 10px;">
                <v-chart :option="pieOption" style="height: 300px; width: 450px;" />
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { Histogram, Coin, Download, Money } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { use } from 'echarts/core'
import VChart from 'vue-echarts'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, PieChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components'

use([CanvasRenderer, BarChart, PieChart, GridComponent, TooltipComponent, TitleComponent, LegendComponent])



const barOption = ref({
    title: { text: '数据统计', left: 'center' },
    tooltip: {},
    legend: { data: ['访问量', '成交额'], top: 30 },
    xAxis: { data: ['一月', '二月', '三月', '四月'] },
    yAxis: {},
    series: [
        {
            name: '访问量',
            type: 'bar',
            data: [9840, 8200, 7000, 6000]
        },
        {
            name: '成交额',
            type: 'bar',
            data: [1942, 1500, 1200, 900]
        }
    ]
})



// 新增饼图配置
const pieOption = ref({
    title: {
        text: '访问量占比',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '访问量',
            type: 'pie',
            radius: '60%',
            data: [
                { value: 9840, name: '一月' },
                { value: 8200, name: '二月' },
                { value: 7000, name: '三月' },
                { value: 6000, name: '四月' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})
</script>

<style scoped>
.infor {
    width: 100%;
    height: 60px;
    margin-bottom: 20px;
    border: 1px solid #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 0 20px; */
}

.user {
    display: flex;
    align-items: center;

    padding-left: 10px;

}

.more {
    padding-right: 10px;
    color: #2d3a4b;
    cursor: pointer;
    /*光标指示器*/
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    background: linear-gradient(to right, rgb(233, 198, 221), rgb(243, 188, 234));
    min-height: 55px;
    color: #fff;
    padding: 10px;
}

p {
    margin: 0;
    font-size: 14px;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30px;
}

.chart {
    display: flex;
    justify-content: space-between;
}
</style>
